var input = document.getElementById("images"),
		formdata = false, imagesArray = new Array(), cont = 0, imagesDisplay = 7, start = 0, end = -1;

(function() {

	function showUploadedItem(source) {
		
		var list = document.getElementById("image-list");

		$jquery(list).addClass('image-list');

		img = document.createElement("img");

		imagesArray[cont] = source;
		img.src = source;
		$jquery(img).attr('id', 'globis'+cont++);
		
		$jquery(img).draggable({
					helper: "clone",
					addClasses: false,
					zIndex: 999,
					start: function(event, ui) {

						websocketClient.dragStart();

						$jquery(this).css('position', 'relative');

						$jquery(this).css('border', '1px solid rgb(0, 0, 0)');

					},
					drag: function(event, ui) {

						websocketClient.coordSend({x: event.pageX, y: event.pageY});
					},
					stop: function(event, ui) {

						websocketClient.dragStop($jquery(this).attr('id'));

						$jquery(this).css('border', '');

					}
				});
		
		$jquery(img).addClass('img');		

		if (cont <= imagesDisplay) {

			end++;

			list.appendChild(img);

		}
	}

	if (window.FormData) {
		formdata = new FormData();
		document.getElementById("btn").style.display = "none";
	}

	input.addEventListener("change", function(evt) {
		document.getElementById("response").innerHTML = "Uploading . . ."
		var i = 0, len = this.files.length, img, reader, file;
        reset();				
		if( len <= imagesDisplay)
		
			$jquery('#buttons').hide();		
		else
			$jquery('#buttons').show();
		for (; i < len; i++) {
			file = this.files[i];

			if (!!file.type.match(/image.*/)) {
				if (window.FileReader) {
					reader = new FileReader();
					reader.onloadend = function(e) {
						showUploadedItem(e.target.result, file.fileName);
					};
					reader.readAsDataURL(file);
				}
				if (formdata) {
					formdata.append("images[]", file);
				}
			}
		}			

		if (formdata) {
			$.ajax({
				url: "phpFiles/upload.php",
				type: "POST",
				data: formdata,
				processData: false,
				contentType: false,
				success: function(res) {
					document.getElementById("response").innerHTML = res;
				}
			});
		}
	}, false);
}());

function sliderNext() {

	if (start === cont)
		start = 0;

	$jquery("#globis" + start).animate({
		opacity: 0.1,
		left: '-=200',
		height: "toggle"
	}, 'fast', function() {

		if (start !== end) {

			start++;

			sliderNext();

			$jquery(this).remove();
		}
		else {
			next();
			$jquery(this).remove();
		}
	});
}

function sliderPrev() {

	if (end < 0)
		end = cont - 1;
	
	$jquery("#globis" + end).animate({
		opacity: 0.1,
		left: '+=200',
		height: "toggle"
	}, 'fast', function() {

		if (end !== start) {

			end--;

			sliderPrev();

			$jquery(this).remove();
		}
		else {
			$jquery(this).remove();
			prev();
		}
	});
}

function next() {

	var list = document.getElementById("image-list");

	if( start === cont - 1)
		start = 0;
	else
		start++;
		

	for (var i = 0; i < imagesDisplay; i++) {

		if (end !== cont - 1) {

			img = document.createElement("img");

			img.src = imagesArray[++end];

			$jquery(img).addClass('img');

			$jquery(img).attr('id', end);

			list.appendChild(img);
		}
		else {
			i--;
			end = -1;
		}
	}
}

function prev() {

	if (end === 0)
		end = cont - 1;
	else
		end--;

	var list = document.getElementById("image-list");

	if (end < (imagesDisplay - 1)) {

		start = cont - ((imagesDisplay - 1) - end);
	}
	else
		start = end - (imagesDisplay - 1);

	startAux = start;

	for (var i = 0; i < imagesDisplay; i++) {

		if (startAux !== cont) {

			img = document.createElement("img");

			img.src = imagesArray[startAux];

			$jquery(img).addClass('img');

			$jquery(img).attr('id', startAux++);

			list.appendChild(img);
		}
		else {
			i--;
			startAux = 0;
		}
	}
}

function reset(){
	
	input = document.getElementById("images");
	formdata = false;
	imagesArray = new Array();
	cont = 0;	
	imagesDisplay = 7;
	start = 0;
	end = -1;
	$jquery('#image-list').children().remove();
}


